// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../utilities/_animation.less";

@inputCls: ~"@{prefix}-input";
@inputNumberCls: ~"@{prefix}-input-number";

.@{inputNumberCls} {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 0 @input-number-button-width;
  user-select: none;
  width: @input-number-width;

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    appearance: none;
  }

  input[type="number"] {
    appearance: textfield;
  }

  .@{inputCls}__inner {
    text-align: center;
    margin: 0 (@spacer / 2);
    width: calc(100% - 8px);
    color: @input-number-inner-color;
  }

  &__decrease,
  &__increase {
    width: @input-number-button-width;
    height: @input-number-button-height;
    position: absolute;
    top: 0;
    border: 1px solid @input-number-button-border-color;
    box-sizing: border-box;
    border-radius: @border-radius;
    background-color: @input-number-button-bg-color;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    cursor: pointer;
    transition: all @anim-time-fn-easing @anim-duration-base;

    &:hover {
      color: @input-number-button-color-hover;
      border-color: @input-number-button-color-hover;

      .@{prefix}-icon {
        color: @input-number-button-color-hover;
      }
    }

    &:active {
      color: @input-number-button-color-hover;
      background-color: @bg-color-container-hover;
    }

    .@{prefix}-icon {
      position: relative;
      z-index: 1;
      font-size: @input-number-font-size;
      color: @text-color-secondary;
    }

    &.@{prefix}-is-disabled {
      color: @input-number-button-color-disabled;
      cursor: no-drop;
      background-color: @input-number-button-bg-color-disabled;

      .@{prefix}-icon {
        color: @input-number-button-color-disabled;
      }

      &:hover {
        border-color: @input-number-button-border-color;

        .@{prefix}-icon {
          color: @input-number-button-color-disabled;
        }
      }
    }
  }

  &__decrease {
    left: 0;
  }

  &__increase {
    right: 0;
  }

  &--normal {
    padding: 0;
    border-radius: @border-radius;

    .@{inputCls}__inner {
      text-align: left;
    }

    &.@{prefix}-is-disabled {
      cursor: no-drop;
      color: @input-number-button-color-disabled;

      &:hover {

        .@{inputCls}__inner {
          border-color: @input-number-button-border-color;
        }
      }

      .@{inputCls}__inner:focus {
        box-shadow: none;
      }
    }
  }
}

.@{inputNumberCls}.@{prefix}-is-disabled {

  .@{inputCls}__inner {
    cursor: no-drop;
    background-color: @input-number-bg-color-disabled;
    color: @input-number-inner-color-disabled;

    &:hover,
    &:focus,
    &:active {
      border-color: @input-number-button-border-color;
    }
  }

  .@{inputNumberCls}__decrease,
  .@{inputNumberCls}__increase {
    color: @input-number-button-color-disabled;
    cursor: no-drop;
    background-color: @input-number-button-bg-color-disabled;

    .@{prefix}-icon {
      color: @text-color-secondary;
    }
  }
}

.@{inputNumberCls}.@{prefix}-size-s {
  width: @input-number-width-s;
  padding: 0 @input-number-button-width-s;

  .@{inputCls}__inner {
    height: @input-number-inner-height-s;
    line-height: @input-number-inner-height-s;
  }

  .@{inputNumberCls}__decrease,
  .@{inputNumberCls}__increase {
    font-size: @input-number-font-size-s;
    width: @input-number-button-width-s;
    height: @input-number-button-height-s;
  }
}

.@{inputNumberCls}.@{prefix}-size-l {
  width: @input-number-width-l;
  padding: 0 @input-number-button-width-l;

  .@{inputCls}__inner {
    height: @input-number-inner-height-l;
    line-height: @input-number-inner-height-l;
  }

  .@{inputNumberCls}__decrease,
  .@{inputNumberCls}__increase {
    font-size: @input-number-font-size-l;
    width: @input-number-button-width-l;
    height: @input-number-button-height-l;
  }

  &.@{prefix}-is-controls-right {

    .@{inputCls}__inner {
      height: @input-number-inner-height-l;
      line-height: @input-number-inner-height-l;
      padding-right:
        @input-number-right-button-width-l +
        @input-number-padding-horizontal-default;
    }

    .@{inputNumberCls}__decrease,
    .@{inputNumberCls}__increase {
      width: @input-number-right-button-width-l;
      font-size: @input-number-right-font-size-l;
    }
  }
}

.@{inputNumberCls}.@{prefix}-is-controls-right {
  width: @input-number-right-width;
  padding: 0;

  &.@{prefix}-size-l {
    width: @input-number-right-width-l;
  }

  &:hover {

    .@{inputNumberCls}__decrease,
    .@{inputNumberCls}__increase {
      opacity: 1;
      visibility: visible;
    }
  }

  .@{inputCls}__inner {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-right:
      (@input-number-right-button-width +
      @input-number-padding-horizontal-default);
    text-align: left;
    border-radius: @border-radius;
  }

  .@{inputNumberCls}__decrease,
  .@{inputNumberCls}__increase {
    width: @input-number-right-button-width;
    height: calc(50% - 2px);
    border: 0;
    left: initial;
    top: initial;
    right: 1px;
    border-radius: 0;
    background: @input-number-right-button-bg-color;
    opacity: 0;
    visibility: hidden;
    z-index: 2;

    .@{prefix}-icon {
      font-size: @input-number-right-font-size;
    }

    &:hover {
      background: @input-number-right-button-hover-bg-color;

      .@{prefix}-icon {
        color: @text-color-primary;
      }
    }

    &.@{prefix}-is-disabled {
      color: @input-number-button-color-disabled;
      cursor: no-drop;
      background-color: @input-number-button-bg-color-disabled;

      .@{prefix}-icon {
        color: @input-number-button-color-disabled;
      }

      &:hover {
        border-color: @input-number-button-border-color;

        .@{prefix}-icon {
          color: @input-number-button-color-disabled;
        }
      }
    }
  }

  .@{inputNumberCls}__decrease {
    bottom: 1px;
    border-bottom-right-radius: calc(@border-radius - 1px);
  }

  .@{inputNumberCls}__increase {
    top: 1px;
    border-top-right-radius: calc(@border-radius - 1px);
  }
}
